<template>
	<view class="page-fade-in" :style="{opacity: pageOpc}">
		<template v-if="pageOpc">
			<view class="content">
				<view class="order-box">
					<view class="order-item">
						<view class="item-top flexWrap">
							<view class="order-info flexWarpColumn">
								<view class="order-name">
									<text>{{orderInfo.store_equipment_name}}</text>
									<text class="shop-name">{{orderInfo.shop_name}}</text>
								</view>
								<view class="order-time">
								<block v-if="orderInfo.order_type=='immediately'">立刻开台</block>
								<block v-if="orderInfo.order_type=='make_appointment'">预约开台</block>
								<block v-if="orderInfo.order_type=='other_packages'">其他套餐</block>
								<block v-if="orderInfo.order_type=='about_ball'">同城约球</block>
								{{orderInfo.quantity}}小时</view>
								<view class="order-date">{{orderInfo.service_date||'加载中...'}} {{orderInfo.start_time||'加载中...'}}～<text v-if="orderInfo.is_ci==1">次日</text>{{orderInfo.end_time||'加载中...'}}</view>
								<view class="flexWrapNo" v-if="orderInfo.order_status==10">
									<view class="order-btn"  @tap="showOpen(1)">结束/关灯</view>
									<view class="order-btn" style="width: 136upx;margin-left: 10upx;" v-if="orderInfo.type==2"  @tap="goTable()">续费</view>
								</view>
								<view class="order-btn noStarted" v-if="orderInfo.order_status==0" @tap="showOpen(0)">开始/开灯</view>
								<view class="order-btn end" v-if="orderInfo.order_status==20">已结束</view>
								<view class="order-btn end" v-if="orderInfo.order_status==30">已取消</view>
								<view class="order-btn end" v-if="orderInfo.order_status==40">已超时</view>
							</view>
							<view class="order-img">
								<image src="/static/order/billiards.png" v-if="orderInfo.type==1"></image>
								<image src="/static/order/mj.png" v-else></image>
							</view>
						</view>
						<view class="order-status" v-if="orderInfo.order_status==10">使用中</view>
						<view class="item-bottom">
							<view class="order-info-text">下单时间：{{orderInfo.createtime}}</view>
							<view class="order-info-text">订单编号：{{orderInfo.order_no}}</view>
							<view class="order-info-text">订单金额：¥{{orderInfo.total_pay_money}}</view>
							<view class="order-info-text">{{orderInfo.payment_method==6?'通卡优惠':'优惠卡券'}}：-¥{{orderInfo.coupon_deduction_money||'0.00'}}</view>
							<view class="order-info-text">实付金额：¥{{orderInfo.actual_payment}}</view>
							<view class="order-info-text">
								付款方式：
								<block v-if="orderInfo.payment_method==1">微信支付</block>
								<block v-if="orderInfo.payment_method==2">充值抵扣</block>
								<block v-if="orderInfo.payment_method==3">美团验劵</block>
								<block v-if="orderInfo.payment_method==4">抖音验券</block>
								<block v-if="orderInfo.payment_method==6">通卡支付</block>
							</view>
							<view class="order-info-text">支付时间：{{orderInfo.payment_time}}</view>
							<view class="order-info-text">
								订单状态：
								<block v-if="orderInfo.order_status==0">待使用</block>
								<block v-if="orderInfo.order_status==10">使用中</block>
								<block v-if="orderInfo.order_status==20">已结束</block>
								<block v-if="orderInfo.order_status==30">已取消</block>
								<block v-if="orderInfo.order_status==40">已超时</block>
							</view>
							<view class="order-info-text">开始时间：{{orderInfo.service_start_time}}</view>
							<view class="order-info-text">结束时间：{{orderInfo.service_end_time}}</view>
							<block v-if="orderInfo.order_status==30||orderInfo.order_status==20">
								<view class="order-info-text" v-if="orderInfo.refund_money">退款金额：{{orderInfo.refund_money||0}}</view>
								<view class="order-info-text" v-if="orderInfo.refund_money">退款时间：{{orderInfo.refund_time||'无'}}</view>
							</block>
							<!-- <block v-if="paymentConfig.order_cancellation==1">
								<view class="cancle-btn" @tap="showTips()" v-if="orderInfo.payment_method!=3&&orderInfo.order_type!='other_packages'&&(orderInfo.order_status!=20&&orderInfo.order_status!=30)">{{orderInfo.order_status==0?"取消订单":"结束订单"}}</view>
							</block> -->
							<block v-if="paymentConfig.order_cancellation==1&&!orderInfo.about_ball_id">
								<view class="cancle-btn" @tap="showTips()" v-if="orderInfo.order_status!=20&&orderInfo.order_status!=30">
									{{orderInfo.order_status==0?"取消订单":"结束订单"}}
								</view>
							</block>
							<view class="openDoor-box flexWrap" v-if="orderInfo.type==2&&orderInfo.isShow==1">
								<view @tap="goPage('/pages/home/openDoor')">开门</view>
								<button class="share" open-type="share">分享开门</button>
							</view>
						</view>
					</view>
				</view>
				<!-- 取消/结束按钮 -->
				<view class="tips-box flexWarpCenterColumn" v-if="tipsFlage" :class="{cancel_box:iscancle==1}">
					<view class="tips-name" v-if="orderInfo.order_status==0">{{iscancle==1?'订单已取消':'确认取消订单？'}}</view>
					<view class="tips-name" v-else>{{iscancle==1?'订单已结束':'确认结束订单？'}}</view>
					<view class="tips-text" v-if="iscancle==0">
						<view v-if="orderInfo.order_status==0">取消订单系统仅退还实付金额</view>
						<view v-else>结束订单系统仅退还实付金额</view>
						<view>不退还已使用的优惠券/团购券/套餐</view>
					</view>
					<view class="tips-text" v-else>
						<view>退款由原路退还</view>
					</view>
					<view class="btn-box flexWrap" v-if="iscancle==0">
						<view class="tips-btn" @tap="closeTips()">{{orderInfo.order_status==0?"不取消":"不结束"}}</view>
						<view class="tips-btn noStarted" @tap="opreaAction()">
							{{orderInfo.order_status==0?"确认取消":"确认结束"}}
						</view>
					</view>
					<view class="btn-box flexWrap" v-else>
						<view class="tips-btn" @tap="closeTips()">知道了</view>
					</view>
				</view>
				<!-- 开关灯按钮 -->
				<view class="tips-box1 flexWarpCenterColumn" v-if="openFlag">
					<view class="tips-name" v-if="showIndex==0">是否确认开灯？</view>
					<view class="tips-name" v-else>未到结束时间，是否继续关灯？</view>
					<view class="btn-box flexWrap">
						<view class="tips-btn" @tap="closeOpen()">取消</view>
						<view class="tips-btn noStarted" @tap="openLamp()" v-if="showIndex==0">确定开灯</view>
						<view class="tips-btn noStarted" @tap="opreaAction()" v-else>确定结束</view>
					</view>
				</view>
				<view class="mask-box" v-if="tipsFlage||openFlag"></view>
			</view>
		</template>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				status: 1,
				pageOpc: 0,
				order_id:"",
				tipsFlage:false,
				orderInfo:{
					actual_payment: "0.00",
					coupon_deduction_money: "00.00",
					coupon_title: "加载中...",
					createtime: "加载中...",
					order_no: "加载中...",
					order_status: 10,
					order_type: "immediately",
					payment_method: 2,
					payment_status: 1,
					payment_time: "加载中...",
					platform_commission: "0.00",
					quantity: 0,
					recharge_consumption: "00.00",
					refund_money: "加载中...",
					refund_time: "加载中...",
					service_end_time: "加载中...",
					service_start_time: "加载中...",
					shop_name: "加载中...",
					store_equipment_name: "加载中...",
					total_pay_money: "加载中...",
					updatetime: "加载中...",
				},
				iscancle:0,
				cancleText:"取消订单",
				showIndex:0,
				openFlag:false,
				paymentConfig:{},
				timestamp:""
			}
		},
		onReady() {
			setTimeout(() => {
				this.pageOpc = 1
			}, 100)
		},
		onLoad(ops) {
			this.timestamp = Date.parse(new Date())/1000;
			this.order_id=ops.order_id
			this.paymentConfig=uni.getStorageSync('paymentConfig')
			this.orderDetails();
		},
		onShareAppMessage: function(e) {
			let that=this
			return {
				title:"开门",
				path: `/pages/home/openDoor?store_id=${uni.getStorageSync('store_id')}&token=${uni.getStorageSync('token')}`,
				imageUrl:"",
				success: (res) => {
					uni.showToast({
						title: '分享成功',
						icon: 'success',
						duration: 1500
					})
				}
			}
		},
		methods: {
			goTable(){
				uni.navigateTo({
					url:"/pages/home/renew?equipment_id="+this.orderInfo.store_equipment_id+'&renew_order_id='+this.orderInfo.id
				})
			},
			opreaAction(){
				if(this.orderInfo.payment_method==3||this.orderInfo.payment_method==4){
					this.closeLamp();
					return;
				}
				if(this.orderInfo.order_type=='other_packages'&&this.orderInfo.order_status!=0){//套餐
					this.closeLamp();
				}else{
					this.cancelOrder();
				}
			},
			showTips(){
				this.tipsFlage=true
			},
			closeTips(){
				this.tipsFlage=false
			},
			showOpen(index){
				this.openFlag=true
				this.showIndex=index
			},
			closeOpen(){
				this.openFlag=false
			},
			// 获取订单详情
			orderDetails(){
				this.$request.post(this.$api.orderDetails, {
					order_id:this.order_id
				}, {
					token:true
				}).then(res => {
					let {
						data = {}
					} = res;
					if (res.code==1) {
						this.orderInfo=data
						if(Math.abs(this.timestamp-this.orderInfo.service_end_time)>86400){
							this.orderInfo.isShow=0
						}else{
							this.orderInfo.isShow=1
						}
						this.orderInfo.createtime = this.$tools.formatDate(this.orderInfo.createtime)
						this.orderInfo.service_start_time = this.$tools.formatDate(this.orderInfo.service_start_time)
						this.orderInfo.service_end_time = this.$tools.formatDate(this.orderInfo.service_end_time)
						this.orderInfo.payment_time = this.$tools.formatDate(this.orderInfo.payment_time)
						this.orderInfo.refund_time = this.$tools.formatDate(this.orderInfo.refund_time)
						this.orderInfo.service_date=this.orderInfo.service_start_time.split(' ')[0]
						this.orderInfo.start_time=this.orderInfo.service_start_time.split(' ')[1]
						this.orderInfo.end_time=this.orderInfo.service_end_time.split(' ')[1]
					}
				})
			},
			// 开灯
			openLamp(){
				this.$jiuaiDebounce.canDoFunction({
					key: 'openLamp', //基于此值判断是否可以操作，如两个方法传入了同样的key，则会混淆，建议传入调用此事件的方法名，简单好梳理
					time: 2000, //如果传入time字段，则为定时器后，自动解除锁定状态，单位（毫秒）
					success: () => { //成功中调用应该操作的方法，被锁定状态不会执行此代码块内的方法
						this.$request.post(this.$api.openLamp, {
							order_id:this.order_id
						}, {
							token:true
						}).then(res => {
							let {
								data = {}
							} = res;
							if (res.code==1) {
								this.$tools.showToast('开灯成功')
								this.closeOpen()
								this.orderDetails()
							}
						})
					}
				})
			},
			// 关灯
			closeLamp(){
				this.$jiuaiDebounce.canDoFunction({
					key: 'closeLamp', //基于此值判断是否可以操作，如两个方法传入了同样的key，则会混淆，建议传入调用此事件的方法名，简单好梳理
					time: 2000, //如果传入time字段，则为定时器后，自动解除锁定状态，单位（毫秒）
					success: () => { //成功中调用应该操作的方法，被锁定状态不会执行此代码块内的方法
						this.$request.post(this.$api.closeLamp, {
							order_id:this.order_id
						}, {
							token:true
						}).then(res => {
							let {
								data = {}
							} = res;
							if (res.code==1) {
								this.$tools.showToast('操作成功')
								this.closeOpen()
								this.closeTips()
								this.orderDetails()
							}
						})
					}
				})
			},
			// 取消订单
			cancelOrder(){
				this.$jiuaiDebounce.canDoFunction({
					key: 'cancelOrder', //基于此值判断是否可以操作，如两个方法传入了同样的key，则会混淆，建议传入调用此事件的方法名，简单好梳理
					time: 2000, //如果传入time字段，则为定时器后，自动解除锁定状态，单位（毫秒）
					success: () => { //成功中调用应该操作的方法，被锁定状态不会执行此代码块内的方法
						this.$request.post(this.$api.cancelOrder, {
							order_id:this.order_id
						}, {
							token:true
						}).then(res => {
							let {
								data = {}
							} = res;
							if (res.code==1) {
								this.$tools.showToast('取消成功')
								this.iscancle=1
								if(!this.tipsFlage){
									this.closeOpen()
									this.tipsFlage=true
								}
								// this.closeOpen()
								// this.closeTips()
								this.orderDetails()
							}
						})
					}
				})
			}
		}
	}
</script>

<style lang="scss">
	button::after {
		border: none;
	}
	button {
		margin-left: 0;
		margin-right: 0;
		padding-left: 0;
		padding-right: 0;
		line-height: 1;
		color: #FFFFFF;
		font-size: 28rpx;
		background: none;
		width: 100%;
		border: none;
	}
	.openDoor-box{
		margin-top: 10rpx;
		view{
			width: 304rpx;
			height: 80rpx;
			line-height: 80rpx;
			text-align: center;
			border: 2rpx solid #5BB9F7;
			font-size: 32rpx;
			font-family: PingFang SC-Medium, PingFang SC;
			font-weight: 500;
			color: #FFFFFF;
			border-radius: 20rpx;
		}
		.share{
			background: #26BCFD;
			width: 304rpx;
			height: 80rpx;
			line-height: 80rpx;
			text-align: center;
			border: 2rpx solid #5BB9F7;
			font-size: 32rpx;
			font-family: PingFang SC-Medium, PingFang SC;
			font-weight: 500;
			color: #FFFFFF;
			border-radius: 20rpx;
		}
	}
	.content {
		padding: 0 20upx;
	}
	.order-box {
		.order-item {
			background: #FCFCFC;
			border-radius: 16upx;
			padding-top: 36upx;
			margin-bottom: 20upx;
			position: relative;

			.item-top {
				min-height: 304upx;
				align-items: self-start;

				.order-info {
					padding-left: 28upx;
					min-height: 304upx;
					padding-bottom: 10rpx;
					.order-name {
						font-size: 32upx;
						font-family: PingFang SC;
						font-weight: 500;
						color: #333;

						.shop-name {
							font-size: 24upx;
							font-family: PingFang SC;
							font-weight: 400;
							line-height: 34upx;
							color: #999999;
							margin-left: 18upx;
						}
					}

					.order-time {
						font-size: 32upx;
						font-family: PingFang SC;
						font-weight: 500;
						line-height: 44upx;
						color: #E69C2F;
						margin-top: 14upx;
					}

					.order-date {
						font-size: 24upx;
						font-family: PingFang SC;
						font-weight: 400;
						line-height: 34upx;
						color: #6E6E6E;
						margin-top: 10upx;
					}

					.order-btn {
						width: 200upx;
						height: 80upx;
						line-height: 80upx;
						text-align: center;
						border: 2upx solid #FFB726;
						border-radius: 16upx;
						font-size: 36upx;
						font-family: PingFang SC;
						font-weight: 500;
						color: #333;
						margin-top: 26upx;
					}

					.noStarted {
						background-color: #FFB726;
					}

					.end {
						color: #707070;
						border: 2upx solid #707070;
					}
				}

				.order-img {
					width: 304upx;
					height: 304upx;
					flex: none;
				}
			}

			.item-bottom {
				background: #FFF;
				border-radius: 0px 0px 16upx 16upx;
				font-size: 24upx;
				font-family: PingFang SC;
				font-weight: 400;
				line-height: 60upx;
				color: #999999;
				padding: 34upx 28upx;

				.order-info-text {
					font-size: 24upx;
					font-family: PingFang SC;
					font-weight: 400;
					line-height: 54upx;
					color:#6E6E6E;
				}

				.cancle-btn {
					width: 220upx;
					height: 60upx;
					line-height: 60upx;
					text-align: center;
					border: 2upx solid #D6D6D6;
					border-radius: 16upx;
					font-size: 28upx;
					font-family: PingFang SC;
					font-weight: 500;
					color: #6E6E6E;
					margin: 62upx auto;
				}
			}

			.order-status {
				width: 136upx;
				height: 44upx;
				background:#50AB6E;
				border-radius: 0px 16upx 0px 16upx;
				font-size: 24upx;
				font-family: PingFang SC;
				font-weight: 400;
				line-height: 44upx;
				color: #FFFFFF;
				text-align: center;
				position: absolute;
				top: 0;
				right: 0;
			}
		}
	}
	.mask-box{
		background:rgba(0, 0, 0, .5);
		border-radius: 16upx;
		position: fixed;
		top: 0;
		bottom: 0;
		left: 0;
		right: 0;
		margin: auto;
	}
	.tips-box{
		width: 660upx;
		height: 446upx;
		background:#FFF;
		border-radius: 16upx;
		position: fixed;
		top: 400upx;
		left: 0;
		right: 0;
		margin: auto;
		z-index: 999;
		.tips-name{
			font-size: 36upx;
			font-family: PingFang SC;
			font-weight: 800;
			line-height: 50upx;
			color: #333;
			margin-top: 68upx;
		}
		.tips-text{
			font-size: 32upx;
			font-family: PingFang SC;
			font-weight: 400;
			line-height: 44upx;
			color: #333;
			margin-top: 34upx;
		}
		.btn-box{
			margin-top: 60upx;
			.tips-btn{
				width: 240upx;
				height: 80upx;
				line-height: 80upx;
				text-align: center;
				border: 2upx solid #FFB726;
				border-radius: 16upx;
				font-size: 36upx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #333;
			}
			.noStarted{
				background-color: #FFB726;
				margin-left: 28upx;
			}
		}
	}
	.cancel_box{
		height: 348upx;
		.tips-text{
			margin-top: 24upx;
		}
		.btn-box{
			margin-top: 48upx;
		}
	}
	.tips-box1{
		width: 660upx;
		height: 390upx;
		background:#FFF;
		border-radius: 16upx;
		position: fixed;
		top: 400upx;
		left: 0;
		right: 0;
		margin: auto;
		z-index: 999;
		.tips-name{
			font-size: 36upx;
			font-family: PingFang SC;
			font-weight: 800;
			line-height: 50upx;
			color: #333;
			margin: 90upx 0;
		}
		.btn-box{
			margin-top: 10upx;
			.tips-btn{
				width: 240upx;
				height: 80upx;
				line-height: 80upx;
				text-align: center;
				border: 2upx solid #FFB726;
				border-radius: 16upx;
				font-size: 36upx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #333;
			}
			.noStarted{
				background-color: #FFB726;
				margin-left: 28upx;
			}
		}
	}
</style>
